<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:body>
        <ui:composition template="template.xhtml">
            <ui:define name="tituloJanela">
                #{msgs.logo}
            </ui:define>

            <ui:define name="conteudo">

                <div id="content">

                    <h:form>                                    
                        <h:panelGroup rendered="#{empty jogoBean.buscarLancamentoWii()}">
                            <p>#{msgs.nothing}!</p>
                        </h:panelGroup> 

                        <ul id="jogoul">
                            <ui:repeat value="#{jogoBean.buscarLancamentoWii()}" var="valor">                                    <li class="jogoli">
                                <h:panelGroup rendered="#{empty valor.capa}">
                                    <h:graphicImage style="max-width: 20%;float: left;margin-right:15px" value="css/images/default.png"/>                                   
                                </h:panelGroup>
                                <h:panelGroup rendered="#{not empty valor.capa}">
                                    <h:graphicImage style="max-width: 20%;float: left;margin-right:15px" value="#{valor.capa}"/>                                   
                                </h:panelGroup>
                                <div class='atributos'>#{msgs.name}: <em><h:outputText value="#{valor.nome}"/></em> 
                                    <span class="carrinho"><h:commandLink action="#{carrinhoBean.addJogoCarrinho(valor.idjogo)}"><h:graphicImage value="css/images/cart.png" style="height:16px"/> #{msgs.addcart}!</h:commandLink></span>
                                </div> 
                                <div class='atributos'>#{msgs.type}: <em><h:outputText value="#{valor.tipo}"/></em> </div>  
                                <div class='atributos'>#{msgs.platform}: <em><h:outputText value="#{valor.plataforma}"/></em> </div> 
                                <div class='atributos'>#{msgs.realease}: <em><h:outputText value="#{valor.lancamento}"/></em> </div>  
                                <div class='atributos'>#{msgs.stars}: <em><h:graphicImage value="#{valor.blabla(valor.stars)}" style="height: 15px;"/></em></div>  
                                <div class='atributos'>#{msgs.price}: <em><h:outputText value="#{valor.preco}"/></em></div> 
                                <div class='atributos'>#{msgs.description}: <em><h:outputText value="#{valor.descricao}"/> </em></div>          
                                </li>                
                            </ui:repeat>
                        </ul>
                    </h:form>

                </div>
            </ui:define>

        </ui:composition>

    </h:body>
</html>